<template>
  <el-upload
    v-bind="$attrs"
    :disabled="showProgress"
    :action="action"
    :auto-upload="false"
    :show-file-list="false"
    :on-change="selectFileChange"
  >
    <slot>
      <div class="progress_box ac">
        <el-button size="mini" class="mr-16" :loading="showProgress">上传</el-button>
        <el-progress
          class="inner_pro"
          v-if="showProgress"
          :stroke-width="16"
          text-inside
          :percentage="percentage"
        ></el-progress>
      </div>
    </slot>
  </el-upload>
</template>

<script>
import { SliceUploadFile } from '@/utils/tools/SliceUploadFile'
export default {
  name: 'UploadFileGmr',
  props: {
    value: {
      type: String,
      default: ''
    },
    action: {
      type: String,
      default: '*'
    }
  },
  data() {
    return {
      percentage: 0,
      showProgress: false
    }
  },
  created() {},
  methods: {
    async selectFileChange(file) {
      this.percentage = 0
      this.showProgress = true
      const su = new SliceUploadFile()
      const res = await su.sendRequest(file.raw, (p) => {
        this.percentage = p
        this.$emit('percentage', p)
      })
      this.percentage = 100
      this.showProgress = false
      const fid = res.fid
      this.$emit('change', { fid, file })
    }
  }
}
</script>

<style lang="less" scoped>
.avatar {
  width: 100%;
  display: block;
}
.inner_pro {
  width: 300px;
}
</style>
